{% extends "trees/base.html" %}
{% block title %}Monitor - JM3{% endblock %}
{% block content %}
<h2 class="mb-1">Trees Due Today</h2>
<p class="text-muted">Recognise your tree by its photo, then check it in seconds.</p>
<form method="get" class="mb-3">
  <input type="text" name="q" value="{{ query }}" class="form-control" placeholder="🔍 Search by name or place…">
</form>

<div class="list-group">
  {% for tree in trees %}
  <a href="{% url 'monitor_tree' tree.pk %}" class="list-group-item list-group-item-action d-flex align-items-center gap-3">
    <div style="width:64px;height:64px;flex:0 0 64px;background:#eef3ee;border-radius:.5rem;overflow:hidden;">
      {% if tree.photo %}<img src="{{ tree.photo.url }}" style="width:64px;height:64px;object-fit:cover;" alt="">
      {% else %}<div class="d-flex align-items-center justify-content-center h-100" style="font-size:1.6rem;">🌳</div>{% endif %}
    </div>
    <div class="flex-grow-1">
      <div class="fw-bold">{{ tree.display_name }}</div>
      <div class="small text-muted">📍 {{ tree.location_alias|default:"—" }} · 🌳 {{ tree.species.common_name|default:"—" }}</div>
      <div class="small">
        {% if tree.last_checked_days is None %}<span class="text-danger">Never checked</span>
        {% elif tree.last_checked_days >= 14 %}<span class="text-danger">Last checked {{ tree.last_checked_days }}d ago · needs check</span>
        {% else %}Last checked {{ tree.last_checked_days }}d ago{% endif %}
      </div>
    </div>
    <span class="fs-4">›</span>
  </a>
  {% empty %}
  <div class="text-center text-muted py-5">
    <div style="font-size:2.5rem;">🌱</div>
    No trees to monitor yet.
  </div>
  {% endfor %}
</div>
{% endblock %}
{% block extra_js %}{% endblock %}